<template>
	<!-- 当前天气 -->

	<uni-section>

		<uni-notice-bar show-icon scrollable
			text="今天白天，内蒙古、山西出现小雪，江南和西南地区东部等地出现降温。预计19日夜间至21日，东部和南部海域风力较大，关注对海上交通安全及沿海养殖等的影响；新疆北部有降雪天气，关注对道路交通、设施农业的影响；未来十天南方地区气温持续偏低，关注对农业、能源供应、人体健康等影响" />
	</uni-section>
	<view class="weather1">

		<view class="today">
			<!-- <view class="text" style="font-size: 34rpx; display: block;  disjustify-content: end;">
						{{weatherNow.text}}
					</view> -->

			<h3 style="padding:10px; font-size: 15px; color: darkgrey;">当前天气</h3>
			<hr />
			<view class="icon">

				<view class="">
					<image style="width: 60px;height: 60px;" :src="'/static/wetherIcons/'+ weatherNow.icon +'.png'"
						mode="" />
				</view>
				<view class="temp1" style="font-size: 20px;margin-left: 10px;">
					{{weatherNow.temp}}°C
				</view>
				<view class="type">
					<view class="text2">{{weatherNow.text}}</view>

					<view class="text2">体感温度：{{weatherNow.feelsLike}}℃</view>

				</view>

			</view>

			<view class="content" style="">
				<view class="windScale" id="content-wid">
					{{weatherNow.windDir}} {{weatherNow.windScale}}级
				</view>

				<view class="feelsLike" id="content-wid">
					体感温度： {{weatherNow.feelsLike }}°C
				</view>
				<view class="humidity" id="content-wid">
					湿度： {{weatherNow.humidity }}%
				</view>
			</view>
			<view class="zhishu">
				<view v-for="(live,index) in lives" :key="index">
					<view class="text">{{live.name}}:{{live.text}}</view>
				</view>
			</view>

		</view>
	</view>

	<!-- 7天预报天气-->
	<view class="weather2">
		<h3 style="padding:10px; font-size: 15px; color: darkgrey;">多日预报</h3>
		<hr />
		<scroll-view :scroll-x="true" show-scrollbar="false" class="weather-container">

			<view class="weather-scroll">

				<view v-for="(day, index) in daily" :key="index" class="weather-item">

					<view class="date">{{ day.fxDate }}</view>
					<view class="weather">
						<view class="sunrise-sunrise">
							日出：{{ day.sunrise }}
						</view>

						<view class="iconDay">
							<image style="width: 40px;height: 40px;" :src="'/static/wetherIcons/'+ day.iconDay+'.png'"
								mode="" />
						</view>
						<view class="weather-textDay">
							{{ day.textDay }}
						</view>


						<!-- <view class="moon-info">
						月相：{{ day.moonPhase }}，月升：{{ day.moonrise }}，月落：{{ day.moonset }}
					</view> -->
						<view class="temp">
							<view class="tempMax">
								{{ day.tempMax }}°C
							</view>
							<view class="tempMin">
								{{ day.tempMin }}°C
							</view>
						</view>
						<view class="iconNight">
							<image style="width: 40px;height: 40px;" :src="'/static/wetherIcons/'+ day.iconNight+'.png'"
								mode="" />
						</view>

						<view class="weather-textNight">
							{{ day.textNight }}
						</view>

						<view class="wind-windDirDay">
							{{ day.windDirDay }}
						</view>
						<view class="wind-windSpeedDay" style="color: #666666; font-size: 10px;">
							风速：{{ day.windSpeedDay }}km/h
						</view>

						<view class="wind-windScaleDay">
							{{ day.windScaleDay }}级
						</view>



						<!-- <view class="other-info">
						湿度：{{ day.humidity }}%，气压：{{ day.pressure }}hPa，能见度：{{ day.vis }}km，云量：{{ day.cloud }}%
					</view> -->
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	import {
		userStore
	} from '../../store/userStrore'

	import {
		CONFIG
	} from '../../utils/config'

	onLoad(() => {
		getWeather1()
		getWeather()
		getLive()
	})

	let weatherNow = ref({})
	async function getWeather1() {
		let res = await uni.$get(CONFIG.hefeng_now, {
			key: CONFIG.hefeng_key,
			location: CONFIG.hefeng_location
		})
		if (res.code == 200) {
			weatherNow.value = res.now
			console.log(res.now)
		}
	}

	let daily = ref([])
	async function getWeather() {
		let res = await uni.$get(CONFIG.hefeng_7day, {
			key: CONFIG.hefeng_key,
			location: CONFIG.hefeng_location
		})
		console.log(res)
		daily.value = res.daily
		console.log(daily.value)
	}

	let lives = ref([])
	async function getLive() {
		let res = await uni.$get(CONFIG.hefeng_live, {
			key: CONFIG.hefeng_key,
			location: CONFIG.hefeng_location,
			type: "3,5"
		})
		console.log(res)
		lives.value = res.daily
		console.log(lives.value)
	}



	uni.setNavigationBarTitle({
		title: "天气预报",
	});
</script>

<style scoped>
	
	.weather-container {
		/* padding: 20px; */
		/* background-color: #fff; */
		width: 500rpx;

		/* 背景色 */
	}

	.weather2 {

		/* margin:0 5px; */
		border: 1px solid darkgray;
		border-radius: 10px;
		margin: 10px;
	}

	.weather1 {

		margin: 0 5px;
		border: 1px solid darkgray;
		border-radius: 10px;
		height: 250px;
	}

	.weather-scroll {
		display: flex;
		width: fit-content;
		/* height: 200px; */
		/* overflow-x: auto; */
		/* flex-direction: row; */
		/* scroll-behavior: smooth; */
		/* height: auto; */
		/* 根据内容自动调整高度 */
		padding-bottom: 20px;
		height: 350px;
		/* 为滚动条留出空间 */
	}

	.weather-item {
		/* flex: 0 0 auto; */
		width: 70px;
		/* 防止flex项目被压缩 */
		display: flex;
		flex-direction: column;

		align-items: center;
		text-align: center;
		/* margin: 10px 20px; */
		/* 卡片之间的间距 */
		/* padding: 15px; */
		/* background-color: ghostwhite; */
		/* 卡片背景色 */
		/* border-radius: 10px; */
		/* 卡片圆角 */
		/* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
		/* 卡片阴影 */
		/* border: 1px solid red; */

	} 

	.weather-container {
		display: flex;
		overflow-x: auto;
		/* background-color: #f0f0f0; */
		/* 滚动容器背景色 */
	}

	.weather-scroll {

		display: flex;
		align-items: center;
		gap: 20px;
		/* 卡片之间的间距 */
		padding: 20px;
	}

	.weather-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		/* background-color: #ffffff; */
		/* 卡片背景色 */
		border-radius: 8px;
		/* 卡片圆角 */
		padding: 15px;
		/* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
		/* 卡片阴影 */
		width: 60px;

		/* 卡片宽度 */
		cursor: pointer;
		/* 鼠标悬停时显示指针 */
		transition: transform 0.3s ease;
		/* 过渡动画 */
	}

	.weather-item:hover {
		transform: scale(1.05);
		/* 鼠标悬停时放大 */
	}

	.wind-windScaleDay {
		/* border: 1px solid red; */
		border-radius: 10px;
		background-color: #eeb42c;
		width: 50px;
		/* font-size: 10px; */
		margin: 10px 20px;
		padding: 3px;
	}

	.date {
		font-size: 15px;
		font-weight: bold;
		color: #333;
		/* margin-bottom: 10px; */
	}

	.weather {
		text-align: center;
	}

	.iconDay,
	.iconNight {
		/* margin-bottom: 10px; */
	}

	.temp {
		display: flex;
		justify-content: center;
		flex-direction: column;

	}

	.temp>.tempMax,
	.tempMin {
		/* margin-bottom: 50px; */
		/* margin-top: 20px; */
	}

	.sunrise-sunset,
	.sunrise-sunrise {
		font-size: 10px;
	}

	.sunrise-sunset,
	.weather-textDay,
	.tempMax,
	.tempMin,
	.weather-textNight,
	.wind-info,
	.wind-scale,
	.wind-speed {
		margin: 5px 0;
		font-size: 16px;
		color: #666;
	}

	.toggle-text {
		margin-top: 10px;
		font-size: 10px;
		color: #007AFF;
		/* 更多信息文字颜色 */
		cursor: pointer;
		/* 鼠标悬停时显示指针 */
	}

	/* 可以根据需要添加更多的样式来进一步美化卡片 */

	/* 实时天气样式 */
	.weather1 {
		display: flex;
		justify-content: center;
		padding: 10px;
		/* background-color: #f5f5f5;
		border: 1px solid #ccc; */
		border-radius: 5px;

	}

	.weather-container {
		display: flex;
		align-items: center;

		width: 100%;
	}

	.icon {
		width: 280px;
		height: 60px;
		bottom: 10rpx;
		display: block;
		justify-content: center;
		flex-direction: row;

	}

	.temp1 {
		font-size: 24px;
		/* 根据需要调整字体大小 */
		font-weight: bold;
		margin-right: 10px;
	}

	/* .text {
		font-size: 16px;
		// margin-right: 10px;
	}
	 */
	.content {
		display: flex;
		flex-direction: row;
		justify-content: space-around;

		margin-top: 10px;
	}

	.windScale,
	.feelsLike,
	.humidity {
		font-size: 14px;
		margin-bottom: 5px;
	}



	/* 响应式调整 */
	@media (max-width: 768px) {
		.weather-container {
			flex-direction: column;
			align-items: flex-start;
		}

		.icon {

			display: flex;
			justify-content: center;
			flex-direction: row;
		}

		.more {
			position: static;
			margin-top: 10px;
		}
	}

	/* 响应式设计 */
	@media (max-width: 600px) {
		.weather .text {
			font-size: 28rpx;
			/* 小屏幕下字体大小 */
		}
	}
</style>